<template>
	<!--  :style="videoClueModule.length <= 2 ? 'height:100vh' : 'height:100%'" -->
	<view style="background-color: #eaeaea; height: 100%; width: 100vw; padding-bottom: 20upx;">
		<view class="videoclue-header">
			<view class="group-state-contain">
				<view :class="groupStatusIndex==index?'group-state-active':''" v-for="(item,index) in userclue" :key='index' data-index="index" @click="changeIndex(index)">
					{{item}}
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" style="height: 93vh;" 
		  v-if="groupStatusIndex == 0"
		  >
		  <!-- @scrolltolower="LoadingRecommend" -->
			<!-- 总用户 -->
			<view class="videoclue-content" v-for="(item,index) in allvideoClueModule" :key="index" v-if="groupStatusIndex == 0">
				<view class="">
					<image :src="item.avatar" mode="" style="width: 120upx; height: 120upx; vertical-align: middle; border-radius: 80upx;"></image>
					<view class="" style="display: inline-block; margin-left: 20upx; vertical-align: middle;margin-top: 8upx;">
						<view class="" style="font-size: 32upx; font-weight: bold;height: 46upx;">{{item.nickname}}</view>
						<view class="" style="font-size: 28upx; margin-top: 30upx;">手机号：{{item.phone}}</view>
					</view>
					<button class="copynikename-btn" style="color: #FF664F; background-color: #ffffff;" type="default" @click="copyData(item.nickname)">复制昵称</button>
					<button class="callphone-btn" style="color: #FFFFFF;" type="default" @click="callPhone(item.phone)">拨打电话</button>
				</view>
				<view style="height: 2upx; background-color: #F2F2F2; margin: 50upx 0upx 30upx 0upx;"></view>
				<view class="" style="font-size: 26upx; color: rgba(0,0,0,0.45);">
					<view class="" style="margin-bottom: 10upx;">
						第一次到店时间：{{ item.first_time | formatDates }}
					</view>
					<view class="">
						最近到店时间：{{ item.recent_time | formatDates }}
					</view>
				</view>
				<view style="height: 2upx; background-color: #F2F2F2; margin: 30upx 0upx 30upx 0upx;"></view>
				<view class="" style="font-size: 24upx; margin-top: 20upx; text-align: center; font-weight: bold;">
					<view style="display: inline-block; position: absolute; left: 65upx;">
						到访次数：<view style="display: inline-block; color: red;">{{item.access_num}}</view>次
					</view>
					<view style="display: inline-block;">
						分享次数：<view style="display: inline-block; color: red;">{{item.share_num}}</view>次
					</view>
					<view style="display: inline-block; position: absolute; right: 70upx;">
						邀请人数：<view style="display: inline-block; color: red;">{{item.invite_num}}</view>人
					</view>
				</view>
				<view style="height: 2upx; background-color: #F2F2F2; margin: 30upx 0upx 30upx 0upx;"></view>
				<view class="" style="font-size: 28upx;">
					<view style="display: inline-block; font-weight: bold;">
						浏览记录
					</view>
					<view style="display: inline-block; position: absolute; right: 90upx; color: #55A0F0;" 
					@click="history(item.customer_id)">
						<view style="display: inline-block;">
							更多
						</view>
						<view class="arrow"></view>
						<view class="arrowtoo"></view>
					</view>
					<view class="browsing-records">
						<view class="" v-for="(records,it) in item.detail.slice(0,3)" :style="it == 1 ? 'margin:0upx 26upx 0upx 26upx' : ''">
							<image class="browsing-records-img" :src="records.head_img" mode=""></image>
							<view class="browsing-records-view">
								{{ records.video_detail | getStr(11)}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" style="margin: 30upx 0upx 60upx 0upx; text-align: center; font-size: 26upx; color: rgba(0,0,0,0.25);">
				没有更多了...
			</view>
		</scroll-view>
		
		<!-- 留电话用户 -->
		<scroll-view scroll-y="true" style="height: 93vh;" 
		  v-if="groupStatusIndex == 1"
		  >
		  <!-- @scrolltolower="LoadingRecommend" -->
			<view class="videoclue-content" v-for="(item,index) in videoClueModule" :key="index" v-if="groupStatusIndex == 1">
				<view class="">
					<image :src="item.avatar" mode="" style="width: 120upx; height: 120upx; vertical-align: middle; border-radius: 80upx;"></image>
					<view class="" style="display: inline-block; margin-left: 20upx; vertical-align: middle;margin-top: 8upx;">
						<view class="" style="font-size: 32upx; font-weight: bold;height: 46upx;">{{item.nickname}}</view>
						<view class="" style="font-size: 28upx; margin-top: 30upx;">手机号：{{item.phone}}</view>
					</view>
					<button class="copynikename-btn" style="color: #FF664F; background-color: #ffffff;" type="default" @click="copyData(item.nickname)">复制昵称</button>
					<button class="callphone-btn" style="color: #FFFFFF;" type="default" @click="callPhone(item.phone)">拨打电话</button>
				</view>
				<view style="height: 2upx; background-color: #F2F2F2; margin: 50upx 0upx 30upx 0upx;"></view>
				<view class="" style="font-size: 26upx; color: rgba(0,0,0,0.45);">
					<view class="" style="margin-bottom: 10upx;">
						第一次到店时间：{{ item.first_time | formatDates }}
					</view>
					<view class="">
						最近到店时间：{{ item.recent_time | formatDates }}
					</view>
				</view>
				<view style="height: 2upx; background-color: #F2F2F2; margin: 30upx 0upx 30upx 0upx;"></view>
				<view class="" style="font-size: 24upx; margin-top: 20upx; text-align: center; font-weight: bold;">
					<view style="display: inline-block; position: absolute; left: 65upx;">
						到访次数：<view style="display: inline-block; color: red;">{{item.access_num}}</view>次
					</view>
					<view style="display: inline-block;">
						分享次数：<view style="display: inline-block; color: red;">{{item.share_num}}</view>次
					</view>
					<view style="display: inline-block; position: absolute; right: 70upx;">
						邀请人数：<view style="display: inline-block; color: red;">{{item.invite_num}}</view>人
					</view>
				</view>
				<view style="height: 2upx; background-color: #F2F2F2; margin: 30upx 0upx 30upx 0upx;"></view>
				<view class="" style="font-size: 28upx;">
					<view style="display: inline-block; font-weight: bold;">
						浏览记录
					</view>
					<view style="display: inline-block; position: absolute; right: 90upx; color: #55A0F0;" 
					@click="history(item.customer_id)">
						<view style="display: inline-block;">
							更多
						</view>
						<view class="arrow"></view>
						<view class="arrowtoo"></view>
					</view>
					<view class="browsing-records">
						<view class="" v-for="(records,it) in item.detail.slice(0,3)" :style="it == 1 ? 'margin:0upx 26upx 0upx 26upx' : ''">
							<image class="browsing-records-img" :src="records.head_img" mode=""></image>
							<view class="browsing-records-view">
								{{ records.video_detail | getStr(11)}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" style="margin: 30upx 0upx 60upx 0upx; text-align: center; font-size: 26upx; color: rgba(0,0,0,0.25);">
				没有更多了...
			</view>
		</scroll-view>
	</view>
</template>

<script>
	// #ifdef H5
		import h5Copy from '@/js_sdk/junyi-h5-copy/junyi-h5-copy/junyi-h5-copy.js'
	// #endif
	export default {
		data() {
			return {
				userclue:['总用户','留电话用户'],
				groupStatusIndex:'',
				// 总用户
				allvideoClueModule:[
					
				],
				// 留电话用户
				videoClueModule:[
					
				],
				recomPage:1,
				recomLastPage:1,
				recomPagesize:15,
				videoId:'',
				parentClueDetails:[]
			}
		},
		filters: {
			getStr(str, new_length) {
			// console.log('getStr', str);
				if (!str) {
					return ''
				}
				if (str.length > new_length) {
					return str.slice(0, new_length) + '...'
				} else {
					return str
				}
			},
			formatDates(value) {
			let date = new Date(value * 1000);
			let y = date.getFullYear();
			let MM = date.getMonth() + 1;
			MM = MM < 10 ? ('0' + MM) : MM;
			let d = date.getDate();
			d = d < 10 ? ('0' + d) : d;
			return y + '-' + MM + '-' + d;
			}
		},
		onLoad(options){
			let id = parseInt(options.user_num,10);
			this.videoId = id
			this.getVideoClue(id)
			// this.getParentClueDetails()
		},
		methods: {
			changeIndex(index){
				
				this.groupStatusIndex = index
				
			},
			// #ifdef H5
				// 复制昵称
				copyData(copyText) {
					console.log('点击了复制');
					let content = copyText // 复制内容，必须字符串，数字需要转换为字符串
					const result = h5Copy(content)
					if (result === false) {
						uni.showToast({
							title: '不支持',
						})
					} else {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				},
			// #endif
			// #ifdef MP-WEIXIN
				copyData(wechatNumber) {
					uni.setClipboardData({
						data: wechatNumber,
						success: function (res) {
							uni.getClipboardData({
								success: function (res) {
									console.log(res.data) // data
								}
							})
						}
					})
				},
			// #endif
			// 拨打
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
					success(res) {
						console.log(res)
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			// // 获取家长线索明细
			// getParentClueDetails(){
			// 	console.log("getParentClueDetails",this.$store.getters.getToken)
			// 	let data = {
			// 		token:this.$store.getters.getToken,
			// 		customer_id:this.id,
			// 		store_id:this.$store.getters.getStoreId,
			// 	}
			// 	console.log("8888888",data);
			// 	// 3.发送请求
			// 	this.$api.get_parentClueDetails(data).then(res => {
			// 		console.log(res,"545454");
			// 		if(res.status){
			// 			this.parentClueDetails = res.msg.userInfo
			// 			console.log(this.parentClueDetails,'家长线索明细')
			// 		}else{
			// 			uni.showToast({
			// 				title:res.msg,
			// 				icon:'none',
			// 				duration:2000
			// 			})
			// 		}
			// 	}).catch(err =>{
			// 		console.log(err)
			// 	})
			// },
			// 获取视频线索用户
			getVideoClue(id){
				let _self = this
				console.log("getVideoClue",_self.$store.getters.getToken)
				let data = {
					token:_self.$store.getters.getToken,
					store_id:_self.$store.getters.getStoreId,
					video_id:id,
					page:1,
					pagesize:15,
				}
				console.log("8888888",data);
				// 3.发送请求
				_self.$api.get_videoClue(data).then(res => {
					console.log(res,"545454");
					if(res.status){
						_self.allvideoClueModule = res.msg.userInfo
						// this.recomLastPage = res.data.last_page
						console.log(_self.allvideoClueModule,'视频线索用户')
						// this.videoClueModule = this.allvideoClueModule.filter(item => item.phone != '')
						_self.allvideoClueModule.forEach((item) => {
							if( item.phone != '' ){
								_self.videoClueModule.push(item)
							}
						})
						console.log(_self.videoClueModule,'留电话视频线索用户')
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err =>{
					console.log(err)
				})
			},
			// LoadingRecommend(){
			// 	this.recomPage ++
			// 	console.log(this.recomPage)
			// 	if(this.recomPage <= this.recomLastPage){
			// 		let data = {
			// 			token:this.$store.getters.getToken,
			// 			store_id:this.$store.getters.getStoreId,
			// 			video_id:this.videoId,
			// 			page: this.recomPage,
			// 			pagesize: this.recomPagesize
			// 		}
			// 		this.$api.get_videoClue(data).then(res=>{
			// 			this.allvideoClueModule = this.allvideoClueModule.concat(res.msg.userInfo)
			// 			console.log("上拉加载更多的数据.....")
			// 			console.log(this.videolist)
			// 		}).catch(err => {
			// 			console.log(err)
			// 		})
			// 	}else{
			// 		uni.showToast({
			// 			title:'没有更多了',
			// 			icon:'none',
			// 			duration:2000
			// 		})
			// 	}
			// },
			// 浏览记录
			history(customer_id){
				uni.navigateTo({
					url:"../parentClues/parentClueDetails?topNavActiveIndex=0&customer_id="+customer_id
				})
			}
		}
	}
</script>

<style>
	.videoclue-header{
		padding: 20upx;
		background-color: #ffffff;
	}
	.group-state-contain{
		width: 500upx;
		height: 64upx;
		margin-left: 100upx;
		line-height: 64upx;
		display: flex;
		background: #F2F2F2;
		border-radius: 32upx;
	}
	.group-state-contain>view{
		width: 50%;
		text-align: center;
		color: #666666;
		font-size: 28upx;
		border-radius: 32upx;
	}
	.group-state-contain .group-state-active{
		background: linear-gradient(to right,#FE9543,#FF664F);
		color: #FFFFFF;
	}
	.videoclue-content{
		margin: 30upx;
		padding: 50upx 35upx;
		border-radius: 16upx;
		background-color: #ffffff;
	}
	.copynikename-btn{
		position: absolute;
		display: inline-block;
		right: 60upx;
		width: 160upx;
		line-height: 45upx;
		font-size: 24upx;
		border-radius: 15upx;
		background-color: #ffffff;
		border: 1upx solid #FF664F;
		color: #FF664F;
		border-radius: 45upx;
		margin-top: 6upx;
		vertical-align: middle;
	}
	.callphone-btn{
		position: absolute;
		display: inline-block;
		right: 60upx;
		width: 160upx;
		line-height: 45upx;
		font-size: 24upx;
		border-radius: 15upx;
		color: #ffffff;
		background-image: linear-gradient(90deg, #FE9543 14%, #FF664F 100%);
		border-radius: 45upx;
		margin-top: 77upx;
		vertical-align: middle;
	}
	.arrow{
		display: inline-block;
		position: absolute;
		right: -7px;
		margin-top: 12upx;
		width: 6px;
		height: 6px;
		border-top: 1px solid #55A0F0;
		border-right: 1px solid #55A0F0;
		transform: rotate(45deg);
	}
	.arrowtoo{
		display: inline-block;
		position: absolute;
		right: -12px;
		margin-top: 12upx;
		width: 6px;
		height: 6px;
		border-top: 1px solid #55A0F0;
		border-right: 1px solid #55A0F0;
		transform: rotate(45deg);
	}
	.browsing-records{
		margin-top: 30upx;
		font-weight: bold;
	}
	.browsing-records>view{
		display: inline-block;
		width: 190upx;
		vertical-align: top;
		margin: 0upx 9upx 0upx 9upx;
	}
	.browsing-records-img{
		width: 190upx;
		height: 160upx;
	}
	.browsing-records-view{
		font-size: 20upx;
	}
	
</style>
